<template>
	<div class="videoImg">
		<xgplayer :url="url"></xgplayer>
		<video id="myVideo" width="640" height="360" controls>
			<source :src="url" type="video/mp4" />
			Your browser does not support the video tag.
		</video>
<!-- 
		<canvas id="myCanvas" width="640" height="360" style="display: none"></canvas>
		<img id="videoPoster" alt="Video Poster" /> -->
	</div>
</template>

<script>
	import xgplayer from '@/components/common/xgplayer';
export default {
	props:{
		url:String
	},
	name: 'videoImg',
	components: {xgplayer},
	data() {
		return {};
	},
	computed: {},
	created() {},
	mounted() {
		// const video = document.getElementById('myVideo');
		// const canvas = document.getElementById('myCanvas');
		// const img = document.getElementById('videoPoster');
		// const context = canvas.getContext('2d');

		// video.addEventListener('loadeddata', function () {
		// 	// 当视频加载完毕时，获取视频的第一帧作为封面
		// 	video.currentTime = 1; // 设置视频播放到1秒钟的位置
		// });

		// video.addEventListener('seeked', function () {
		// 	// 在视频跳转到1秒钟后截图
		// 	context.drawImage(video, 0, 0, canvas.width, canvas.height);
		// 	// 将canvas中的图片转化为图片显示
		// 	img.src = canvas.toDataURL();
		// });
	},
	methods: {}
};
</script>

<style scoped lang="less">
.videoImg {
}
</style>